<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时尚简约风格预览 - 固定资产管理系统 6.0</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/admin_minimal.css">
</head>
<body>
    <!-- 左侧导航栏 -->
    <div id="nav-sidebar">
        <div class="nav-sidebar">
            <!-- 资产管理应用 -->
            <div>
                <h2>资产管理</h2>
                <ul>
                    <li>
                        <a href="#asset" class="current">资产管理</a>
                        <a href="#asset-add" class="addlink" title="添加资产"></a>
                    </li>
                    <li>
                        <a href="#department">部门管理</a>
                        <a href="#department-add" class="addlink" title="添加部门"></a>
                    </li>
                    <li>
                        <a href="#supplier">供应商管理</a>
                        <a href="#supplier-add" class="addlink" title="添加供应商"></a>
                    </li>
                    <li>
                        <a href="#position">位置管理</a>
                        <a href="#position-add" class="addlink" title="添加位置"></a>
                    </li>
                    <li>
                        <a href="#contract">合同管理</a>
                        <a href="#contract-add" class="addlink" title="添加合同"></a>
                    </li>
                    <li>
                        <a href="#maintenance">维护管理</a>
                        <a href="#maintenance-add" class="addlink" title="添加维护记录"></a>
                    </li>
                    <li>
                        <a href="#borrow">借用管理</a>
                        <a href="#borrow-add" class="addlink" title="添加借用记录"></a>
                    </li>
                </ul>
            </div>
            
            <!-- 用户管理应用 -->
            <div>
                <h2>用户管理</h2>
                <ul>
                    <li>
                        <a href="#user">用户</a>
                        <a href="#user-add" class="addlink" title="添加用户"></a>
                    </li>
                    <li>
                        <a href="#group">组</a>
                        <a href="#group-add" class="addlink" title="添加组"></a>
                    </li>
                </ul>
            </div>
            
            <!-- 系统设置应用 -->
            <div>
                <h2>系统设置</h2>
                <ul>
                    <li>
                        <a href="#settings">系统配置</a>
                        <a href="#settings-add" class="addlink" title="添加配置"></a>
                    </li>
                    <li>
                        <a href="#reports">报表管理</a>
                        <a href="#reports-add" class="addlink" title="创建报表"></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main">
        <!-- 顶部导航栏 -->
        <div id="header">
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <h1 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--gray-900);">
                    固定资产管理系统 6.0
                </h1>
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <span style="color: var(--gray-600); font-size: 0.875rem;">时尚简约风格</span>
                    <button class="button" onclick="minimalTheme.showNotification('测试', '这是一个通知示例', 'info')">
                        测试通知
                    </button>
                </div>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 增强的搜索功能 -->
            <div class="search-container">
                <div class="search-form">
                    <div class="search-input-group">
                        <input type="text" class="search-input" placeholder="请输入资产名称、用户姓名或部门名称..." id="globalSearch">
                        <i class="fas fa-search search-icon"></i>
                    </div>
                    <div class="search-filters">
                        <button class="search-filter-btn active" data-filter="all">
                            <i class="fas fa-globe"></i>
                            全部
                        </button>
                        <button class="search-filter-btn" data-filter="assets">
                            <i class="fas fa-laptop"></i>
                            资产
                        </button>
                        <button class="search-filter-btn" data-filter="users">
                            <i class="fas fa-users"></i>
                            用户
                        </button>
                        <button class="search-filter-btn" data-filter="departments">
                            <i class="fas fa-building"></i>
                            部门
                        </button>
                    </div>
                </div>
            </div>

            <!-- 信息展示横幅 -->
            <div class="info-banner">
                <div class="info-banner-content">
                    <h1>🏢 固定资产管理系统 6.0</h1>
                    <p class="info-banner-subtitle">现代化、智能化的企业级资产管理解决方案，简化流程、提升效率、降低成本</p>
                    <div class="info-banner-stats">
                        <div class="info-stat">
                            <span class="info-stat-number">1,247</span>
                            <span class="info-stat-label">管理资产数</span>
                        </div>
                        <div class="info-stat">
                            <span class="info-stat-number">98.5%</span>
                            <span class="info-stat-label">系统可靠性</span>
                        </div>
                        <div class="info-stat">
                            <span class="info-stat-number">50+</span>
                            <span class="info-stat-label">企业使用</span>
                        </div>
                        <div class="info-stat">
                            <span class="info-stat-number">24/7</span>
                            <span class="info-stat-label">技术支持</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 统计卡片网格 -->
            <div class="stats-grid">
                <div class="stats-card">
                    <h3><i class="fas fa-desktop"></i> 总资产数</h3>
                    <div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;">
                        <span style="font-size: 2rem; font-weight: 700; color: var(--primary);">1,247</span>
                        <span style="color: var(--success); font-size: 0.875rem; font-weight: 500;">
                            <i class="fas fa-arrow-up"></i> +12.5%
                        </span>
                    </div>
                    <p style="margin: 0; color: var(--gray-500); font-size: 0.875rem;">比上月增长</p>
                </div>

                <div class="stats-card">
                    <h3><i class="fas fa-chart-line"></i> 使用率</h3>
                    <div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;">
                        <span style="font-size: 2rem; font-weight: 700; color: var(--success);">87.3%</span>
                        <span style="color: var(--success); font-size: 0.875rem; font-weight: 500;">
                            <i class="fas fa-arrow-up"></i> +2.1%
                        </span>
                    </div>
                    <div style="background: var(--gray-100); height: 6px; border-radius: 3px; overflow: hidden;">
                        <div style="background: var(--success); height: 100%; width: 87.3%; border-radius: 3px; transition: width 2s ease;"></div>
                    </div>
                </div>

                <div class="stats-card">
                    <h3><i class="fas fa-exclamation-triangle"></i> 待维修</h3>
                    <div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;">
                        <span style="font-size: 2rem; font-weight: 700; color: var(--warning);">23</span>
                        <span style="color: var(--danger); font-size: 0.875rem; font-weight: 500;">
                            <i class="fas fa-arrow-up"></i> +3
                        </span>
                    </div>
                    <p style="margin: 0; color: var(--gray-500); font-size: 0.875rem;">需要关注</p>
                </div>

                <div class="stats-card">
                    <h3><i class="fas fa-dollar-sign"></i> 资产价值</h3>
                    <div style="display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;">
                        <span style="font-size: 2rem; font-weight: 700; color: var(--primary);">¥2.8M</span>
                        <span style="color: var(--success); font-size: 0.875rem; font-weight: 500;">
                            <i class="fas fa-arrow-up"></i> +8.2%
                        </span>
                    </div>
                    <p style="margin: 0; color: var(--gray-500); font-size: 0.875rem;">总估值</p>
                </div>
            </div>

            <!-- 管理功能模块网格 -->
            <div class="management-grid">
                <div class="management-module">
                    <h3><i class="fas fa-laptop"></i> 设备管理</h3>
                    <p style="color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.6;">
                        管理所有IT设备，包括电脑、服务器、网络设备等。支持设备生命周期跟踪和自动化管理。
                    </p>
                    <div style="display: flex; gap: 0.75rem;">
                        <button class="button">查看设备</button>
                        <button class="button secondary">添加设备</button>
                    </div>
                </div>

                <div class="management-module">
                    <h3><i class="fas fa-users"></i> 员工管理</h3>
                    <p style="color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.6;">
                        管理员工信息和权限，支持部门分配、角色管理和访问控制。
                    </p>
                    <div style="display: flex; gap: 0.75rem;">
                        <button class="button">查看员工</button>
                        <button class="button secondary">添加员工</button>
                    </div>
                </div>

                <div class="management-module">
                    <h3><i class="fas fa-chart-bar"></i> 报表分析</h3>
                    <p style="color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.6;">
                        生成详细的资产报表和分析图表，支持多维度数据分析和趋势预测。
                    </p>
                    <div style="display: flex; gap: 0.75rem;">
                        <button class="button">查看报表</button>
                        <button class="button secondary">创建报表</button>
                    </div>
                </div>

                <div class="management-module">
                    <h3><i class="fas fa-cog"></i> 系统设置</h3>
                    <p style="color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.6;">
                        配置系统参数、自定义字段、工作流程和通知设置。
                    </p>
                    <div style="display: flex; gap: 0.75rem;">
                        <button class="button">系统配置</button>
                        <button class="button secondary">高级设置</button>
                    </div>
                </div>
            </div>

            <!-- 快速链接 -->
            <h2 style="margin: 2rem 0 1rem 0; font-size: 1.25rem; font-weight: 600; color: var(--gray-900);">
                快速操作
            </h2>
            <div class="quick-links-grid">
                <a href="#" class="quick-link">
                    <i class="fas fa-plus"></i>
                    <div class="quick-link-content">
                        <div class="quick-link-title">添加资产</div>
                        <div class="quick-link-desc">快速添加新的资产设备</div>
                    </div>
                </a>

                <a href="#" class="quick-link">
                    <i class="fas fa-search"></i>
                    <div class="quick-link-content">
                        <div class="quick-link-title">资产搜索</div>
                        <div class="quick-link-desc">智能搜索和筛选资产</div>
                    </div>
                </a>

                <a href="#" class="quick-link">
                    <i class="fas fa-exchange-alt"></i>
                    <div class="quick-link-content">
                        <div class="quick-link-title">借用归还</div>
                        <div class="quick-link-desc">处理设备借用和归还</div>
                    </div>
                </a>

                <a href="#" class="quick-link">
                    <i class="fas fa-download"></i>
                    <div class="quick-link-content">
                        <div class="quick-link-title">导出报表</div>
                        <div class="quick-link-desc">下载Excel格式报表</div>
                    </div>
                </a>
            </div>

            <!-- 功能特性展示 -->
            <div style="margin-top: 3rem; padding: 2rem; background: white; border-radius: 1rem; border: 1px solid var(--gray-200);">
                <h2 style="margin: 0 0 1.5rem 0; font-size: 1.25rem; font-weight: 600; color: var(--gray-900);">
                    🎨 时尚简约主题特性
                </h2>
                
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;">
                    <div>
                        <h3 style="font-size: 1rem; font-weight: 600; color: var(--primary); margin: 0 0 0.5rem 0;">
                            🎯 现代化设计
                        </h3>
                        <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600);">
                            <li>简洁的视觉设计语言</li>
                            <li>柔和的阴影和圆角</li>
                            <li>清晰的信息层次</li>
                            <li>优雅的色彩搭配</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 style="font-size: 1rem; font-weight: 600; color: var(--success); margin: 0 0 0.5rem 0;">
                            ✨ 流畅交互
                        </h3>
                        <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600);">
                            <li>平滑的动画过渡</li>
                            <li>按钮波纹点击效果</li>
                            <li>智能悬停反馈</li>
                            <li>微妙的3D变换</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 style="font-size: 1rem; font-weight: 600; color: var(--warning); margin: 0 0 0.5rem 0;">
                            📱 响应式布局
                        </h3>
                        <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600);">
                            <li>完美适配移动设备</li>
                            <li>智能网格布局</li>
                            <li>触摸友好界面</li>
                            <li>抽屉式移动菜单</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 style="font-size: 1rem; font-weight: 600; color: var(--info); margin: 0 0 0.5rem 0;">
                            ⚡ 增强功能
                        </h3>
                        <ul style="margin: 0; padding-left: 1.25rem; color: var(--gray-600);">
                            <li>键盘快捷键支持</li>
                            <li>智能工具提示</li>
                            <li>加载状态反馈</li>
                            <li>通知消息系统</li>
                        </ul>
                    </div>
                </div>
                
                <div style="margin-top: 1.5rem; padding: 1rem; background: var(--primary-50); border-radius: 0.5rem; border-left: 4px solid var(--primary);">
                    <p style="margin: 0; color: var(--primary); font-weight: 500;">
                        💡 提示：调整浏览器窗口大小到768px以下可以体验移动端界面。
                        使用快捷键 <kbd style="background: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem;">Ctrl+K</kbd> 可以快速搜索。
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入时尚简约主题JavaScript -->
    <script src="static/js/minimal_theme.js"></script>
    
    <script>
        // 页面加载完成后的演示
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎨 时尚简约主题预览页面已加载');
            
            // 添加一些演示交互
            setTimeout(() => {
                const progressBar = document.querySelector('[style*="width: 87.3%"]');
                if (progressBar) {
                    progressBar.style.width = '0%';
                    setTimeout(() => {
                        progressBar.style.width = '87.3%';
                    }, 500);
                }
            }, 1000);
        });
        
        // 监听主题加载完成事件
        document.addEventListener('minimalThemeLoaded', function(e) {
            console.log('🎉 主题加载完成:', e.detail);
        });
    </script>
</body>
</html>